<template>
	<!-- <view :class="['table','table-'+loading]" v-if="thList.length" :style="{opacity:!loading?1:0,borderColor:borderColor}">
		<view class="thead">
			<template v-for="(item,index) in thList">
				<view class="tr" :key="index">
					<template v-for="(item_col,index_col) in item">
						<view class="th" :id="`th_${index}_${index_col}`" :style="[{flex: item_col.width?`0 0 ${item_col.width}`:'1',borderColor:borderColor},theadStyle]" :key="index_col">
							<rich-text :nodes="item_col[textKey]"></rich-text>
							<view class="cover" v-if="item_col.colspan" :style="[theadStyle,colspanCoverStyle(item_col,thList,index,index_col,'th'),{width:item_col.colWidth?item_col.colWidth+'px':'auto'}]">
								<rich-text :nodes="item_col[textKey]" :style="[richTextStyle(theadStyle)]"></rich-text>
							</view>
							<view class="cover" v-if="item_col.rowspan" :style="[theadStyle,rowspanCoverStyle(item_col,thList,index,index_col,'th'),{height:item_col.rowHeight?item_col.rowHeight+'px':'auto'}]">
								<rich-text :nodes="item_col[textKey]" :style="[richTextStyle(theadStyle)]"></rich-text>
							</view>
						</view>
					</template>
				</view>
			</template>
		</view>
		<view class="tbody">
			<template v-for="(item,index) in tdList">
				<view class="tr" :key="index">
					<template v-for="(item_col,index_col) in item">
						<view class="td" :id="`td_${index}_${index_col}`" :style="[{flex: item_col.width?`0 0 ${item_col.width}`:'1',borderColor:borderColor},tbodyStyle]" :key="index_col">
							<rich-text :nodes="item_col[textKey]" :style="[richTextStyle(tbodyStyle)]"></rich-text>
							<view class="cover" v-if="item_col.colspan" :style="[tbodyStyle,colspanCoverStyle(item_col,tdList,index,index_col,'td'),{width:item_col.colWidth?item_col.colWidth+'px':'auto'}]">
								<rich-text :nodes="item_col[textKey]" :style="[richTextStyle(tbodyStyle)]"></rich-text>
							</view>
							<view class="cover" v-if="item_col.rowspan" :style="[tbodyStyle,rowspanCoverStyle(item_col,tdList,index,index_col,'td'),{height:item_col.rowHeight?item_col.rowHeight+'px':'auto'}]">
								<rich-text :nodes="item_col[textKey]" :style="[richTextStyle(tbodyStyle)]"></rich-text>
							</view>
						</view>
					</template>
				</view>
			</template>
		</view>
	</view> -->
</template>
<script>
	const defaultStyle = {
		justifyContent: 'center',
		fontSize: '26rpx',
		color: '#333'
	};
	export default {
		props: {
			theadList: Array,
			tbodyList: Array,
			textKey: {
				type: String,
				default: 'text'
			},
			thStyle: Object,
			tdStyle: Object,
			borderColor: {
				type: String,
				default: '#ddd'
			}
		},
		data() {
			return {
				loading: true,
				thList: [],
				tdList: [],
				columnDatas: {},
			}
		},
		computed: {
			theadStyle() {
				return { ...defaultStyle, ...this.thStyle };
			},
			tbodyStyle() {
				return { ...defaultStyle, ...this.tdStyle };
			}
		},
		watch: {
			// 表头的变化
			theadList: {
				deep: true,
				handler(newVal) {
					// this.loading = true;
					this.setValue(newVal, 'th');
				},
				immediate: false
			},
			tbodyList: {
				deep: true,
				handler(newVal) {
					// this.loading = true;
					this.setValue(newVal, 'td');
				},
				immediate: false
			}
		},
		created() {
			this.setValue();
		},
		methods: {
			setValue(arr, type) {
				let obj = {},
					theadList = arr && type == 'th' ? JSON.parse(JSON.stringify(arr)) : JSON.parse(JSON.stringify(this.theadList)),
					tbodyList = arr && type == 'td' ? arr : JSON.parse(JSON.stringify(this.tbodyList));
				for (let i = 0; i < theadList.length; i++) {
					for (let j = 0; j < theadList[i].length; j++) {
						if (theadList[i][j].colspan > 0) theadList[i][j].colWidth = 0;
						if (theadList[i][j].rowspan > 0) theadList[i][j].rowHeight = 0;
						obj[j] = obj[j] ? obj[j] : [];
						obj[j].push(theadList[i][j].width);
					}
				}
				for (let i = 0; i < tbodyList.length; i++) {
					for (let j = 0; j < tbodyList[i].length; j++) {
						if (tbodyList[i][j].colspan > 0) tbodyList[i][j].colWidth = 0;
						if (tbodyList[i][j].rowspan > 0) tbodyList[i][j].rowHeight = 0;
						obj[j] = obj[j] ? obj[j] : [];
						obj[j].push(tbodyList[i][j].width);
					}
				}
				let maxObj = {};
				// 优先级：%>px>rpx
				for (let key in obj) {
					const filters_rate = obj[key].filter(item => (item + '').match(/%/) != null);
					if (filters_rate.length) {
						const max = Math.max(...filters_rate.map(item => parseInt(item)));
						maxObj[key] = `${max}%`;
					} else {
						const filters_px = obj[key].filter(item => (item + '').match(/px/) != null);
						if (filters_px.length) {
							const max = Math.max(...filters_px.map(item => parseInt(item)));
							maxObj[key] = max ? `${max}px` : 0;
						} else {
							const max = Math.max(...obj[key].map(item => parseInt(item)));
							maxObj[key] = max ? `${max}rpx` : 0;
						}
					}
				}
				for (let i = 0; i < theadList.length; i++) {
					for (let j = 0; j < theadList[i].length; j++) {
						theadList[i][j].width = maxObj[j];
					}
				}
				for (let i = 0; i < tbodyList.length; i++) {
					for (let j = 0; j < tbodyList[i].length; j++) {
						tbodyList[i][j].width = maxObj[j];
					}
				}
				this.thList = theadList;
				this.tdList = tbodyList;
				setTimeout(() => {
					this.loading = false;
					this.$emit('loaded');
				}, 200)
			},
			richTextStyle(style) {
				const newStyle = { ...style };
				newStyle.textAlign = style.justifyContent;
				return newStyle;
			},
			/**
			 * 表格内容的合并列处理
			 * @param {Object} item 列数据
			 * @param {Object} arr 所有表格数据
			 * @param {Object} index_row 行索引
			 * @param {Object} index_col 列索引
			 * @param {Object} type 类型 表头-th 表格-td
			 */
			async colspanCoverStyle(item, arr, index_row, index_col, type) {
				const colsArr = arr[index_row];
				const colspan = item.colspan;
				let sum = 0;
				for (let i = index_col; i < (colspan + index_col); i++) {
					const nodeinfo = await this.getNodeInfos(`${type}_${index_row}_${i}`);
					sum += nodeinfo.width;
				}
				colsArr[index_col].colWidth = sum - 1;
			},
			/**
			 * 表格内容的合并行处理
			 * @param {Object} item 列数据
			 * @param {Object} arr 所有表格数据
			 * @param {Object} index_row 行索引
			 * @param {Object} index_col 列索引
			 * @param {Object} type 类型 表头-th 表格-td
			 */
			async rowspanCoverStyle(item, arr, index_row, index_col, type) {
				const rowspan = item.rowspan;
				let sum = 0;
				for (let i = index_row; i < (rowspan + index_row); i++) {
					const nodeinfo = await this.getNodeInfos(`${type}_${i}_${index_col}`);
					sum += nodeinfo.height;
				}
				arr[index_row][index_col].rowHeight = sum - 1;
			},
			/**
			 * 获取节点的信息
			 * @param {Object} id 节点id属性
			 */
			getNodeInfos(id) {
				return new Promise((resolve) => {
					this.$nextTick(() => {
						const query = uni.createSelectorQuery().in(this);
						query.select(`#${id}`).boundingClientRect(data => {
							resolve(data);
						}).exec();
					})
				})
			}
		}
	}
</script>
<style lang="scss">
	page {
		padding: 30rpx;
		box-sizing: border-box;
	}
	view {
		box-sizing: border-box;
	}
	.table {
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 100%;
		box-sizing: border-box;
		border-left: 1px solid #ddd;
	}
	.table-false {
		transition: opacity .4s;
	}
	.thead .tr:first-child .th {
		border-top: 1px solid #ddd;
	}
	.thead, .tbody {
		width: 100%;
	}
	.thead .tr,
	.tbody .tr {
		display: flex;
		justify-content: space-between;
	}
	.thead .tr .th,
	.tbody .tr .td {
		flex: 1;
		display: flex;
		align-items: center;
		position: relative;
		padding: 6rpx 10rpx;
		box-sizing: border-box;
		border-right: 1px solid #ddd;
		border-bottom: 1px solid #ddd;
	}
	.cover {
		display: flex;
		align-items: center;
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		z-index: 9;
		background-color: #fff;
	}
</style>
